<template>
	<view class="videoList-container" @click="tapToDetail(id)">
		
		<!-- <video
			:src="video_url"
			:poster="img_url"
			:poster-for-crawler="img_url"
			:autoplay="false"
			:controls="true"
		></video> -->
		
		<image style="width: 100%;" :src="img_url" controls></image>
		
		<view class="videoinfo">
			
			<uni-title class="title" type="h1" :title="title"></uni-title>
			
			<text>{{ source }}</text>
			
			<view class="videoBtn">
				<image @click.stop="changeStatus" :src="likeBtnUrl"></image>
				<text>{{ likecount }}</text>
				<image src="../static/videoIcon/分享.png"></image>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	
	export default {
		props: {
			id: {
				type: Number,
				required: true
			},
			source: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			video_type: {
				type: Number,
				default: 0
			},
			video_url: {
				type: String,
				default: ''
			},
			img_url: {
				type: String,
				default: ''
			},
			datetime: {
				type: String,
				default: ''
			},
			likestatus: {
				type: Boolean,
				default: false
			},
			likecount: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				likeBtnUrl: this.likestatus ? require('../static/videoIcon/点赞1.png') : require('../static/videoIcon/点赞2.png')
			}
		},
		methods: {
			changeStatus() {
				this.likeBtnUrl = !this.likestatus ? require('../static/videoIcon/点赞1.png') : require('../static/videoIcon/点赞2.png')
				this.$emit('changeLikeStatus', {id: this.id, likecount: this.likecount, likestatus: this.likestatus})
			},
			tapToDetail(id) {
				this.$emit('toVideoDetail', {id: id, type: this.video_type})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.videoList-container {
		width: 100%;
		video {
			width: 100%;
		}
		.videoinfo {
			position: relative;
			height: 150rpx;
			> text, .title {
				margin-left: 20rpx;
			}
			text {
				margin-top: 20rpx;
			}
			.videoBtn {
				position: absolute;
				display: flex;
				justify-content: space-between;
				align-items:flex-end;
				right: 40rpx;
				bottom: 35rpx;
				width: 140rpx;
				
				image {
					width: 42rpx;
					height: 42rpx;
				}
				text {
					display: block;
					font-size: 20px;
				}
			}
		}
	}
</style>
